<template>
  <div @scroll="onScroll" ref="artList" class="article-list">
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <!-- 
        load事件绑定的onLoad方法，是专门用来加载数据的方法
            它会在页面一打开，并且数据没铺满时调用
            当你上拉到快结束，还会自动再调用

            onLoad方法还必须满足两个条件才能调用
                当 loading 和 finished 都为false才调用

        finished代表标记是否全部加载完毕
            如果为true，代表全部加载完，就不会调用onLoad了
            如果为false,onLoad才能去调用加载数据
            所以要注意：如果确实如果全部加载完了，记得要把finished改为true

        v-model绑定的loading标记当前是否正在加载中
            如果为true，代表数据还在加载，不能调用onLoad
            如果为false，代表数据没在加载，可以调用onLoad加载新的数据

            默认要给false，否则页面一启动就显示加载中，一次都不会调用onLoad

            它为false后，会自动调用onLoad，onLoad一旦调用会自动把loading改为true


        总结：
            加载数据写到 `onLoad` 里面
            如果这次加载完了，记得要把`loading`改为false
            还要判断是否全部加载完毕，全部加载完毕把 `finished`改成true
     -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.art_id" @click="$router.push(`/article?id=${item.art_id}`)">
          <template>
            <!-- 标题 -->
            <div class="title">{{ item.title }}</div>
            <!-- 宫格 -->
            <!-- 
            column-num：有3列，也就是按3列来平分
           -->
            <van-grid :border="false" :column-num="item.cover.type">
              <!-- 有几列，这里就只能有几个van-grid-item，跟列数要保持一致 -->
              <van-grid-item v-for="(pic, i) in item.cover.images" :key="i">
                <van-image :src="pic" />
              </van-grid-item>
            </van-grid>
            <!-- 作者信息、评论数量、发表时间 -->
            <div class="info-box">
              <div>
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
                <span>{{ item.pubdate | relvTime }}</span>
              </div>
              <van-icon name="cross" />
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { artilceListAPI } from "@/api/article";
export default {
  // 便捷的写法：但是不能要求必传，以及不能限制类型等
  // props:[ 'channel_id'],

  // 完整写法
  props: {
    channel_id: {
      // 必传
      required: true,
      // 类型必须是Number，否则也会报错
      type: Number,
    },
  },
  data() {
    return {
      // 控制下拉的加载状态
      pullLoading: false,
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      scrollTop: 0
    };
  },
  methods: {

    // 滚动触发的事件
    onScroll () {
      // 记录滚动条
      this.scrollTop = this.$refs.artList.scrollTop
    },

    // 上拉刷新（往上面滚动）
    async onLoad() {
      // 发请求
      const res = await artilceListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp,
      });

      // 保存本次得到的上一个时间段新闻的时间戳
      this.timestamp = res.data.pre_timestamp;
      // 把本次数据赋值给list，会覆盖原本的数组
      // this.list = res.data.results

      // 如果一直替换，就一直铺不满，所以应该只是在之前的基础上加
      this.list.push(...res.data.results);

      // 本次加载完了，要把loading改为false
      this.loading = false;

      // 判断是否加载完毕
      if (this.timestamp == null) {
        this.finished = true;
      }
    },


    // 下拉刷新（往下拉）
    async onRefresh() {
      // 发请求
      const res = await artilceListAPI({
        channel_id: this.channel_id,
        // 下拉刷新永远加载服务器里最新的数据，所以写死当前时间戳就是加载最新数据
        timestamp: Date.now(),
      })

      // 把加载状态改为false
      this.pullLoading = false

      // 因为这相当于要刷新整个新闻，所以你下拉后，应该是拿最新数据覆盖原本的内容
      this.list = res.data.results
      
      // 有10条数据，现在界面只有10条，我往上翻会翻到底，翻到底要加载下一页（上一个时间段的时间戳）
      // 所以需要把上一个时间戳存起来，才方便上拉加载更多的数据
      this.timestamp = res.data.pre_timestamp

      // 此时相当于新闻是完整重新开始的，所以应该把全部加载的标记设置为false
      this.finished = false
    },
  },

  activated () {
    // 把记录的滚动条的值，再重新赋值回有滚动条的根标签
    this.$refs.artList.scrollTop = this.scrollTop
  }
};
</script>

<style lang="less" scoped>
.article-list {
  position: fixed;
  width: 100%;
  top: 90px;
  bottom: 50px;
  overflow: auto;

  .info-box {
    color: gray;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-size: 12px;

      &:nth-child(2) {
        margin: 0 10px;
      }
    }
  }
}
</style>